<template>
  <div>
    <div class="food-title"><router-link to="/"><svg viewBox="0 0 20 32" id="arrow-left.6f6409e" width="100%" height="100%"><path fill="#fff" d="M16.552 5.633L14.508 3.59 2.243 15.853 14.508 28.41l2.044-2.043-10.22-10.513z"></path></svg></router-link><h1>美食</h1></div>
    <FoodMenu></FoodMenu>
    <div class="shop-container">
      <ShopList></ShopList>
    </div>
  </div>
</template>

<script>
import FoodMenu from '@/components/FoodMenu.vue'
import ShopList from '@/components/ShopList.vue'
import { mapMutations } from 'vuex'
export default {
  name: 'food',
  components: {
    FoodMenu,
    ShopList
  },
  methods: {
    ...mapMutations({
      hideTab: 'HIDETAB'
    })
  },
  mounted: function () {
    this.hideTab()
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
  .shop-container{
    padding-top: px2rem(167);
  }
  .food-title{
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: px2rem(88);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    h1 {
      position: absolute;
      top: px2rem(20);
      left: px2rem(340);
      color: #fff;
      font-size: px2rem(36);
    }
    svg{
      margin-left: px2rem(28);
      width: px2rem(28);
      fill: #fff;
    }
  }
</style>
